<template>
  <!-- 商品详情组件 -->
  <div>
    <component-details v-show="tabsActive==0" ref="componentDetail" eventId="componentDetail" :contentInfo="contentInfo" formFlag="1">
      <div class="flex tabbar" slot="tabbar">
        <el-tabs v-model="tabsActive">
          <el-tab-pane label="商品详情" name="0"></el-tab-pane>
          <el-tab-pane label="助播素材" name="1" v-if="fromListPage == 30 && enterpriseConfig.anchorSelectionAuthority == '1'"></el-tab-pane>
        </el-tabs>
      </div>
    </component-details>
    <component-details v-show="tabsActive==1" ref="componentAnchorDetail" eventId="componentAnchorDetail" :contentInfo="contentInfo" formFlag="1" :showBatchUploadBtn="true" :showRichTextBtn="false" :showVideoBtn="false">
      <div class="flex tabbar" slot="tabbar">
        <el-tabs v-model="tabsActive">
          <el-tab-pane label="商品详情" name="0"></el-tab-pane>
          <el-tab-pane label="助播素材" name="1" v-if="fromListPage == 30 && enterpriseConfig.anchorSelectionAuthority == '1'"></el-tab-pane>
        </el-tabs>
      </div>
    </component-details>
  </div>
</template>

<script>
  import componentDetails from '@/components/ComponentTemplate/ComponentDetails'

  export default {
    components: {
      componentDetails
    },
    props: {
      // 跳转源 30：零售 31：批发
      fromListPage: {
        type: Number,
        default: 30
      },
      // 商品对象
      goodsObj: {
        type: Object
      }
    },
    data() {
      return {
        contentInfo: {
          labelName: '商品详情'
        },
        tabsActive: '0',
        // 企业系统配置
        enterpriseConfig: {
          anchorSelectionAuthority: 0
        }
      }
    },
    created() {
    },
    mounted() {
      const goodsBaseData = this.$store.state.goodsBaseData
      Object.assign(this.enterpriseConfig, goodsBaseData.enterpriseConfig)
      this.initForm()
    },
    methods: {
      // 初始化表单
      initForm() {
        if (this.goodsObj.goodsId) {
          this.$refs.componentDetail.initTemplate(this.goodsObj.detailTemplateId)
          this.$refs.componentAnchorDetail.initTemplate(this.goodsObj.anchorTemplateId)
        }
      },
      // 保存
      saveTemplate() {
        // 最后一个参数做商品基本信息保存用 true代表保存
        this.$refs.componentAnchorDetail.submit(1, 'ComponentTemplate.bindTemplateId', 'componentAnchorDetail', false)
        // 等待尽量保证【componentAnchorDetail】先回调
        setTimeout(() => {}, 500)
        this.$refs.componentDetail.submit(1, 'ComponentTemplate.bindTemplateId', 'componentDetail', true)
      }
    }
  }
</script>

<style lang="less" scoped>
  .tabbar{
    /deep/.el-tabs__nav-wrap::after {
      background-color: unset
    }
    /deep/.el-tabs__item.is-active {
      border-bottom: #409eff 2px solid;
    }
    /deep/.el-tabs__item {
      min-width: 0!important;
      padding: unset!important;
      margin-right: 80px!important;
    }
  }
</style>
